<template>
 <el-dialog
  v-model="dialogVisible"
  width="70%"
  top="5vh"
  :before-close="handleClose"
> 
  <div class="content">
    <div class="control">
      <el-tooltip
        effect="light"
        content="复制代码"
        placement="bottom"
      >
      <div class="copy" @click="handleCopy"> 复制 </div>
      </el-tooltip>
    </div>
    <el-scrollbar height="75vh">
      <highlightjs  
        autodetect
        :code="proxy.$utils.filterVueFile(props.file)"
        v-hljs
      />
    </el-scrollbar>
  </div>
  
</el-dialog>
</template>
<script setup lang="ts">
import { ref , getCurrentInstance, reactive,onMounted } from 'vue';

const {proxy}:any = getCurrentInstance();

const props = defineProps({
  file:{ 
    type:String,
    default:''
  },
})

const dialogVisible = ref(false)

const handleClose = (done: () => void) => {
  done()
}
const handleCopy = async()=>{
  proxy.$utils.handleCopy(proxy.$utils.filterVueFile(props.file))
}
const showDialog =()=>{
  dialogVisible.value = true;
}

defineExpose({showDialog})
</script>
<style scoped lang="less">
  .content{
    position: relative;

    .control{
      position: absolute;
      right:4px;
      top: 4px;
      z-index: 1000;
      display: flex;
      
      .copy{
        font-size: 12px;
        color: #333;
        background-color: rgba(255,255,255,0.5);
        padding: 4px 8px;
        border-radius:4px;
        cursor: pointer;
        margin-left: 10px;
      }
      .copy:hover{
        background-color: rgba(255,255,255,0.8);
      }
    }
    
  }
</style>